<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="header-content">
        <view class="logo-section">
          <view class="logo-icon">
            <image
              class="logo-image"
              src="@/static/VK_MDY_lightmode.png"
              mode="aspectFit"
            ></image>
          </view>
          <text class="logo-text">VKG AI</text>
        </view>
        <view class="header-actions">
          <button class="header-btn" @click="showUserMenu">
            <image
              class="user-avatar-image"
              src="@/static/VK_MDY_lightmode.png"
              mode="aspectFit"
            ></image>
          </button>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 欢迎区域 -->
      <view class="welcome-section">
        <text class="welcome-title">欢迎使用 VKG AI</text>
        <text class="welcome-subtitle">智能文档问答助手，让知识触手可及</text>
      </view>

      <!-- 功能卡片区域 -->
      <view class="features-section">
        <view class="feature-card" @click="startNewChat">
          <view class="feature-icon">
            <view class="icon-bubble"></view>
          </view>
          <text class="feature-title">开始对话</text>
          <text class="feature-desc">与AI助手进行智能问答</text>
        </view>

        <view class="feature-card" @click="goToDocuments">
          <view class="feature-icon">
            <view class="icon-documents">
              <view class="doc doc-1"></view>
              <view class="doc doc-2"></view>
              <view class="doc doc-3"></view>
            </view>
          </view>
          <text class="feature-title">文档管理</text>
          <text class="feature-desc">管理您的文档和查看分析结果</text>
        </view>

        <view class="feature-card" @click="showHistory">
          <view class="feature-icon">
            <view class="icon-folder"></view>
          </view>
          <text class="feature-title">对话历史</text>
          <text class="feature-desc">查看之前的对话记录</text>
        </view>

        <view class="feature-card" @click="showUploadDialog">
          <view class="feature-icon">
            <view class="icon-upload">
              <view class="upload-arrow"></view>
              <view class="upload-line"></view>
            </view>
          </view>
          <text class="feature-title">上传文档</text>
          <text class="feature-desc">上传文档进行智能分析</text>
        </view>
      </view>

      <!-- 快速开始区域 -->
      <view class="quick-start-section">
        <text class="section-title">快速开始</text>
        <view class="quick-actions">
          <button
            class="quick-btn"
            @click="askQuestion('介绍一下VKG AI的功能')"
          >
            <text class="quick-text">功能介绍</text>
          </button>
          <button
            class="quick-btn"
            @click="askQuestion('如何使用文档问答功能')"
          >
            <text class="quick-text">使用指南</text>
          </button>
          <button class="quick-btn" @click="askQuestion('支持哪些文档格式')">
            <text class="quick-text">格式支持</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 聊天界面 -->
    <view v-if="showChat" class="chat-overlay">
      <view class="chat-container">
        <view class="chat-header">
          <text class="chat-title">AI 对话</text>
          <button class="close-btn" @click="hideChat">✕</button>
        </view>

        <scroll-view
          class="chat-messages"
          scroll-y="true"
          :scroll-top="scrollTop"
        >
          <view
            v-for="(message, index) in chatMessages"
            :key="index"
            class="message-item"
            :class="{
              'message-user': message.type === 'user',
              'message-ai': message.type === 'ai',
            }"
          >
            <view class="message-avatar">
              <text class="avatar-icon">{{
                message.type === "user" ? "👤" : "🤖"
              }}</text>
            </view>
            <view class="message-content">
              <text class="message-text">{{ message.content }}</text>
              <!-- 来源信息显示 -->
              <view
                v-if="message.sources && message.sources.length > 0"
                class="message-sources"
              >
                <text class="sources-title">来源：</text>
                <view
                  v-for="(source, index) in message.sources"
                  :key="index"
                  class="source-item"
                >
                  <text class="source-content">{{ source.content }}</text>
                  <text v-if="source.source" class="source-name">{{
                    source.source
                  }}</text>
                  <text class="source-similarity"
                    >相似度: {{ (source.similarity * 100).toFixed(1) }}%</text
                  >
                </view>
              </view>
              <text class="message-time">{{
                formatTime(message.timestamp)
              }}</text>
            </view>
          </view>

          <!-- 加载状态 -->
          <view v-if="loading" class="message-item message-ai">
            <view class="message-avatar">
              <text class="avatar-icon">🤖</text>
            </view>
            <view class="message-content">
              <view class="typing-indicator">
                <view class="typing-dot"></view>
                <view class="typing-dot"></view>
                <view class="typing-dot"></view>
              </view>
            </view>
          </view>
        </scroll-view>

        <!-- 输入区域 -->
        <view class="chat-input-area">
          <view class="input-wrapper">
            <textarea
              v-model="inputMessage"
              class="chat-input"
              placeholder="请输入您的问题..."
              :disabled="loading"
              :maxlength="1000"
              auto-height
            />
            <button
              class="send-btn"
              :class="{ 'send-btn-disabled': !inputMessage.trim() || loading }"
              :disabled="!inputMessage.trim() || loading"
              @click="sendMessage"
            >
              <text class="send-icon">📤</text>
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 用户菜单弹窗 -->
    <view
      v-if="showUserMenuFlag"
      class="user-menu-overlay"
      @click="hideUserMenu"
    >
      <view class="user-menu" @click.stop>
        <view class="user-info">
          <text class="user-avatar">👤</text>
          <text class="user-name">{{ userInfo.username || "用户" }}</text>
        </view>
        <view class="menu-actions">
          <button class="menu-action" @click="showProfile">
            <text class="action-icon">⚙️</text>
            <text class="action-text">个人设置</text>
          </button>
          <button
            v-if="userInfo.isGuest"
            class="menu-action"
            @click="exitGuestMode"
          >
            <text class="action-icon">🚪</text>
            <text class="action-text">退出游客模式</text>
          </button>
          <button v-else class="menu-action" @click="logout">
            <text class="action-icon">🚪</text>
            <text class="action-text">退出登录</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 上传文档弹窗 -->
    <view
      v-if="showUploadDialogFlag"
      class="upload-overlay"
      @click="hideUploadDialog"
    >
      <view class="upload-dialog" @click.stop>
        <view class="upload-header">
          <text class="upload-title">上传文档</text>
          <button class="close-btn" @click="hideUploadDialog">✕</button>
        </view>
        <view class="upload-content">
          <button class="file-select-btn" @click="selectFile">
            <text class="select-icon">📁</text>
            <text class="select-text">选择文件</text>
          </button>
          <text v-if="selectedFile" class="selected-file">{{
            selectedFile.name
          }}</text>
          <button
            class="upload-submit-btn"
            :disabled="!selectedFile || uploading"
            @click="uploadFile"
          >
            <text v-if="!uploading">上传</text>
            <text v-else>上传中...</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import { chatAPI, documentAPI } from "@/api/index";
import { useUserStore } from "@/stores/user";

// API基础URL - 确保URL格式完全正确
const API_BASE_URL = "http://admin-yzy-two.wudkmao.top/api/v1";

// 调试：打印API基础URL
console.log("API_BASE_URL:", API_BASE_URL);
console.log("环境变量:", import.meta.env);

// 响应式数据
const showChat = ref(false);
const loading = ref(false);
const uploading = ref(false);
const showUserMenuFlag = ref(false);
const showUploadDialogFlag = ref(false);
const selectedFile = ref(null);
const inputMessage = ref("");
const scrollTop = ref(0);

// 聊天相关
const chatMessages = ref([]);
const currentConversationId = ref(null);

// 用户状态管理
const userStore = useUserStore();
const userInfo = ref({});

// 生命周期
onMounted(() => {
  checkAuth();
});

// 检查认证状态
const checkAuth = () => {
  // 检查是否为游客模式
  if (userStore.isGuestMode()) {
    const guestUser = userStore.getGuestInfo();
    if (guestUser) {
      userInfo.value = {
        username: guestUser.username,
        isGuest: true,
      };

      // 显示游客模式提示框
      uni.showModal({
        title: "游客模式",
        content: "当前为游客模式，如果要使用对话功能，请点击右上角退出注册账号",
        showCancel: false,
        confirmText: "我知道了",
      });
    }
    return;
  }

  // 检查正式登录状态
  if (!userStore.isLoggedIn()) {
    uni.reLaunch({ url: "/pages/login/index" });
    return;
  }

  const user = userStore.getUserInfo();
  if (user) {
    userInfo.value = user;
  }
};

// 显示用户菜单
const showUserMenu = () => {
  showUserMenuFlag.value = true;
};

// 隐藏用户菜单
const hideUserMenu = () => {
  showUserMenuFlag.value = false;
};

// 退出登录
const logout = () => {
  userStore.logout();
};

// 开始新对话
const startNewChat = () => {
  showChat.value = true;
  chatMessages.value = [];
  currentConversationId.value = null;
};

// 隐藏聊天界面
const hideChat = () => {
  showChat.value = false;
};

// 跳转到文档管理页面
const goToDocuments = () => {
  uni.navigateTo({
    url: "/pages/documents/index",
  });
};

// 显示上传对话框（保留用于直接上传）
const showUploadDialog = () => {
  showUploadDialogFlag.value = true;
};

// 隐藏上传对话框
const hideUploadDialog = () => {
  showUploadDialogFlag.value = false;
  selectedFile.value = null;
};

// 显示历史记录
const showHistory = () => {
  uni.navigateTo({
    url: "/pages/chat/index",
  });
};

// 显示个人设置
const showProfile = () => {
  uni.showToast({
    title: "功能开发中",
    icon: "none",
  });
};

// 退出游客模式
const exitGuestMode = () => {
  userStore.exitGuestMode();
  // 跳转到登录页
  uni.reLaunch({ url: "/pages/login/index" });
};

// 快速提问
const askQuestion = (question) => {
  startNewChat();
  inputMessage.value = question;
  nextTick(() => {
    sendMessage();
  });
};

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || loading.value) return;

  const message = inputMessage.value.trim();
  const userMessage = {
    type: "user",
    content: message,
    timestamp: new Date(),
  };

  // 添加用户消息
  chatMessages.value.push(userMessage);
  inputMessage.value = "";

  // 滚动到底部
  await nextTick();
  scrollToBottom();

  try {
    loading.value = true;

    // 创建或获取对话
    if (!currentConversationId.value) {
      const convResponse = await chatAPI.createConversation(
        message.substring(0, 50)
      );
      if (convResponse && convResponse.id) {
        currentConversationId.value = convResponse.id;
      }
    }

    // 发送问题
    const response = await chatAPI.askQuestion(
      message,
      currentConversationId.value
    );

    if (response && response.answer) {
      const aiMessage = {
        type: "ai",
        content: response.answer,
        timestamp: new Date(),
        sources: response.sources || [],
      };
      chatMessages.value.push(aiMessage);

      // 更新对话ID（后端可能会返回新的对话ID）
      if (response.conversationId) {
        currentConversationId.value = response.conversationId;
      }

      // 滚动到底部
      await nextTick();
      scrollToBottom();
    } else {
      throw new Error("返回的回答格式不正确");
    }
  } catch (error) {
    console.error("发送消息失败:", error);
    uni.showToast({
      title: "发送失败，请重试",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 滚动到底部
const scrollToBottom = () => {
  scrollTop.value = 999999;
};

// 选择文件
const selectFile = async () => {
  try {
    // #ifdef H5
    const input = document.createElement("input");
    input.type = "file";
    input.accept = ".pdf,.doc,.docx,.txt,.md";
    input.onchange = (e) => {
      if (e.target.files && e.target.files.length > 0) {
        const file = e.target.files[0];
        console.log("H5文件选择结果:", {
          name: file.name,
          size: file.size,
          type: file.type,
          // 不要使用file作为path，这可能导致错误的URL生成
          path: file.name, // 只使用文件名作为路径
          tempFilePath: file.name,
          // 添加原始File对象引用
          originalFile: file,
        });

        // 为H5端创建兼容的文件对象
        selectedFile.value = {
          name: file.name,
          size: file.size,
          type: file.type,
          // 使用文件名作为路径，避免生成错误的URL
          path: file.name,
          tempFilePath: file.name,
          // 添加原始File对象引用
          originalFile: file,
        };
      }
    };
    input.click();
    // #endif

    // #ifdef MP-WEIXIN || APP-PLUS
    try {
      const res = await uni.chooseMessageFile({
        count: 1,
        type: "file",
        extension: ["pdf", "doc", "docx", "txt", "md"],
      });
      if (res.tempFiles && res.tempFiles.length > 0) {
        const file = res.tempFiles[0];
        console.log("微信小程序文件选择结果:", file);

        // 为微信小程序端创建兼容的文件对象
        // 微信小程序的文件对象需要特殊处理，确保有正确的文件名
        selectedFile.value = {
          name:
            file.name || file.path?.split("/").pop() || `文件_${Date.now()}`,
          size: file.size,
          type: file.type || "application/octet-stream",
          path: file.path,
          tempFilePath: file.path,
          // 微信小程序特有的属性
          originalFile: file,
        };

        console.log("处理后的文件对象:", selectedFile.value);
      }
    } catch (chooseError) {
      console.log("chooseMessageFile失败，尝试chooseFile:", chooseError);
      // 如果chooseMessageFile失败，尝试使用chooseFile
      const res = await uni.chooseFile({
        count: 1,
        type: "all",
        extension: [".pdf", ".doc", ".docx", ".txt", ".md"],
      });
      if (res.tempFiles && res.tempFiles.length > 0) {
        const file = res.tempFiles[0];
        console.log("微信小程序chooseFile结果:", file);

        // 为微信小程序端创建兼容的文件对象
        selectedFile.value = {
          name:
            file.name || file.path?.split("/").pop() || `文件_${Date.now()}`,
          size: file.size,
          type: file.type || "application/octet-stream",
          path: file.path,
          tempFilePath: file.path,
          // 微信小程序特有的属性
          originalFile: file,
        };

        console.log("处理后的文件对象:", selectedFile.value);
      }
    }
    // #endif
  } catch (error) {
    console.error("选择文件失败:", error);
    uni.showToast({
      title: "选择文件失败",
      icon: "none",
    });
  }
};

// 上传文件 - 完全按照后端DocumentController接口设计
const uploadFile = async () => {
  if (!selectedFile.value) return;

  try {
    uploading.value = true;
    console.log("开始上传文件:", selectedFile.value);

    // 检查用户登录状态
    if (!userStore.isLoggedIn()) {
      uploading.value = false;
      uni.showModal({
        title: "需要登录",
        content: "上传文档需要登录账号，请先登录",
        confirmText: "去登录",
        cancelText: "取消",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/index",
            });
          }
        },
      });
      return;
    }

    // 检查token是否存在
    const token = uni.getStorageSync("token");
    if (!token) {
      uploading.value = false;
      uni.showToast({
        title: "认证失败，请重新登录",
        icon: "none",
      });
      return;
    }

    console.log("用户已登录，Token:", token);
    console.log("用户信息:", userInfo.value);
    console.log("准备上传文件:", {
      name: selectedFile.value.name,
      size: selectedFile.value.size,
      type: selectedFile.value.type,
      hasOriginalFile: !!selectedFile.value.originalFile,
    });

    // 调用documentAPI.upload方法
    // 传递文件名作为第二个参数（对应后端的fileName参数）
    // 确保文件名正确，微信小程序端可能需要特殊处理
    const fileName =
      selectedFile.value.name ||
      selectedFile.value.path?.split("/").pop() ||
      `文件_${Date.now()}`;
    console.log("最终使用的文件名:", fileName);

    const response = await documentAPI.upload(selectedFile.value, fileName);

    console.log("上传成功，返回结果:", response);

    // 检查返回结果 - 后端返回的是文档对象，包含id字段
    if (response && (response.id || response.Id)) {
      uni.showToast({
        title: "上传成功",
        icon: "success",
        duration: 2000,
      });

      // 延迟关闭对话框，让用户看到成功提示
      setTimeout(() => {
        hideUploadDialog();
        selectedFile.value = null;
      }, 1500);
    } else {
      console.warn("返回数据结构不符合预期:", response);
      // 即使数据结构不符合预期，如果API调用成功，仍然认为上传成功
      uni.showToast({
        title: "上传成功",
        icon: "success",
        duration: 2000,
      });

      setTimeout(() => {
        hideUploadDialog();
        selectedFile.value = null;
      }, 1500);
    }
  } catch (error) {
    console.error("上传失败:", error);

    let errorTitle = "上传失败，请重试";

    if (typeof error === "string") {
      errorTitle = error;
    } else if (error && error.message) {
      errorTitle = error.message.replace(/^Error:\s*/i, "");
    }

    // 限制错误信息长度
    if (errorTitle.length > 50) {
      errorTitle = errorTitle.substring(0, 50) + "...";
    }

    uni.showToast({
      title: errorTitle,
      icon: "none",
      duration: 3000,
    });
  } finally {
    uploading.value = false;
  }
};

// 格式化时间
const formatTime = (time) => {
  const date = new Date(time);
  const now = new Date();
  const diff = now - date;

  if (diff < 60000) return "刚刚";
  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;
  return date.toLocaleDateString();
};
</script>

<style lang="scss">
/* 全局样式，去掉滚动条 */
/* #ifdef H5 */
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

html {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 确保页面底部没有空白 */
body {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* #endif */

page {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
</style>

<style lang="scss" scoped>
/* 全局样式，去掉滚动条 */
.container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

/* 添加背景装饰 */
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 20% 80%,
      rgba(120, 119, 198, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 119, 198, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(120, 219, 255, 0.2) 0%,
      transparent 50%
    );
  pointer-events: none;
}

/* 确保页面填满整个视口 */
page {
  height: 100vh;
  overflow: hidden;
}

/* H5端特殊处理 */
/* #ifdef H5 */
.container {
  height: 100vh;
  overflow: hidden;
}

.chat-overlay {
  position: fixed;
}
/* #endif */

.header {
  padding: 40rpx 40rpx 20rpx;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20rpx);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  overflow: hidden;
}

.logo-image {
  width: 60rpx;
  height: 60rpx;
}

.logo-text {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.header-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

.user-avatar-image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

.main-content {
  padding: 40rpx;
  flex: 1;
  position: relative;
  z-index: 5;
}

.welcome-section {
  text-align: center;
  margin-bottom: 80rpx;
}

.welcome-title {
  font-size: 56rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 20rpx;
}

.welcome-subtitle {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.features-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
  gap: 40rpx;
  margin-bottom: 80rpx;
}

.feature-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20rpx);
  border-radius: 20rpx;
  padding: 50rpx 40rpx;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-8rpx);
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
  }
}

.feature-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 auto 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
}

.icon-bubble {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-bubble::before {
  content: "";
  width: 40rpx;
  height: 30rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx 20rpx 20rpx 5rpx;
  position: relative;
}

.icon-bubble::after {
  content: "";
  position: absolute;
  bottom: -8rpx;
  right: 10rpx;
  width: 0;
  height: 0;
  border-left: 8rpx solid rgba(255, 255, 255, 0.9);
  border-top: 8rpx solid transparent;
  border-bottom: 8rpx solid transparent;
}

.icon-documents {
  width: 60rpx;
  height: 60rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doc {
  position: absolute;
  width: 24rpx;
  height: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.doc-1 {
  top: 5rpx;
  left: 5rpx;
  transform: rotate(-5deg);
}

.doc-2 {
  bottom: 5rpx;
  right: 5rpx;
  transform: rotate(5deg);
}

.doc-3 {
  top: 15rpx;
  right: 15rpx;
  transform: rotate(-10deg);
}

.icon-folder {
  width: 60rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-folder::before {
  content: "";
  position: absolute;
  top: 8rpx;
  left: 8rpx;
  right: 8rpx;
  height: 8rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4rpx 4rpx 0 0;
}

.icon-folder::after {
  content: "";
  position: absolute;
  top: 16rpx;
  left: 8rpx;
  right: 8rpx;
  bottom: 8rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 0 4rpx 4rpx;
}

.icon-upload {
  width: 60rpx;
  height: 60rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-arrow {
  width: 0;
  height: 0;
  border-left: 15rpx solid transparent;
  border-right: 15rpx solid transparent;
  border-bottom: 20rpx solid rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 8rpx;
}

.upload-line {
  width: 20rpx;
  height: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2rpx;
  position: absolute;
  bottom: 8rpx;
}

.feature-title {
  font-size: 32rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  display: block;
  margin-bottom: 15rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.feature-desc {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.quick-start-section {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20rpx);
  border-radius: 20rpx;
  padding: 50rpx 40rpx;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  display: block;
  text-align: center;
  margin-bottom: 35rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 25rpx;
  justify-content: center;
}

.quick-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15rpx;
  padding: 25rpx 35rpx;
  color: white;
  font-size: 26rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);

  &:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
  }

  &:active {
    transform: scale(0.98);
  }
}

.quick-text {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

/* 聊天界面样式 */
.chat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-container {
  width: 100%;
  max-width: 1000rpx;
  height: 85%;
  background: white;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-header {
  padding: 40rpx;
  background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
}

.chat-messages {
  flex: 1;
  padding: 10rpx 10rpx 10rpx 10rpx;
  overflow-y: auto;
}

.message-item {
  display: flex;
  margin-bottom: 30rpx;
  animation: fadeIn 0.3s ease;
}

.message-user {
  flex-direction: row-reverse;

  .message-content {
    align-items: flex-end;
    margin-right: 20rpx;
  }

  .message-avatar {
    margin-left: 40rpx;
    margin-right: 20rpx;
  }
}

.message-ai {
  .message-content {
    margin-left: 20rpx;
  }
}

.message-avatar {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 16rpx;
  overflow: visible;
}

.avatar-icon {
  font-size: 44rpx;
  line-height: 1;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 65%;
}

.message-text {
  background: #f8f9fa;
  padding: 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
  color: #333;
  word-wrap: break-word;
}

.message-time {
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 来源信息样式 */
.message-sources {
  margin-top: 20rpx;
  padding: 20rpx;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 12rpx;
  border-left: 4rpx solid #667eea;
}

.sources-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #667eea;
  display: block;
  margin-bottom: 15rpx;
}

.source-item {
  margin-bottom: 15rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}

.source-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.source-content {
  font-size: 22rpx;
  color: #333;
  line-height: 1.4;
  display: block;
  margin-bottom: 8rpx;
}

.source-name {
  font-size: 20rpx;
  color: #666;
  font-style: italic;
  display: block;
  margin-bottom: 5rpx;
}

.source-similarity {
  font-size: 18rpx;
  color: #999;
  display: block;
}

.typing-indicator {
  display: flex;
  align-items: center;
  padding: 20rpx;
}

.typing-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #999;
  margin: 0 4rpx;
  animation: typing 1.4s infinite ease-in-out;

  &:nth-child(1) {
    animation-delay: -0.32s;
  }
  &:nth-child(2) {
    animation-delay: -0.16s;
  }
}

@keyframes typing {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.chat-input-area {
  padding: 20rpx;
  background: #f8f9fa;
  border-top: 1rpx solid #e9ecef;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  background: white;
  border-radius: 25rpx;
  padding: 20rpx;
  border: 1rpx solid #e9ecef;
}

.chat-input {
  flex: 1;
  min-height: 60rpx;
  max-height: 200rpx;
  background: transparent;
  border: none;
  outline: none;
  font-size: 28rpx;
  line-height: 1.5;
  resize: none;
}

.send-btn {
  background: #667eea;
  border: none;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
  }
}

.send-btn-disabled {
  background: #ccc;
  opacity: 0.6;
}

.send-icon {
  font-size: 32rpx;
  color: white;
}

/* 弹窗样式 */
.user-menu-overlay,
.upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.user-menu,
.upload-dialog {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  min-width: 400rpx;
  max-width: 80%;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.user-avatar {
  font-size: 64rpx;
  margin-right: 20rpx;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background: #f0f0f0;
  border-radius: 50%;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.menu-action {
  background: none;
  border: none;
  padding: 20rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  transition: background 0.3s ease;

  &:hover {
    background: #f5f5f5;
  }
}

.action-icon {
  margin-right: 20rpx;
  font-size: 32rpx;
}

.action-text {
  font-size: 28rpx;
  color: #333;
}

.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.upload-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
}

.file-select-btn {
  background: #667eea;
  border: none;
  border-radius: 25rpx;
  padding: 30rpx 60rpx;
  color: white;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.select-icon {
  margin-right: 20rpx;
}

.selected-file {
  font-size: 24rpx;
  color: #666;
  text-align: center;
}

.upload-submit-btn {
  background: #4caf50;
  border: none;
  border-radius: 25rpx;
  padding: 20rpx 40rpx;
  color: white;
  font-size: 28rpx;

  &:disabled {
    background: #ccc;
    opacity: 0.6;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .header {
    padding: 20rpx 20rpx 10rpx;
  }

  .main-content {
    padding: 20rpx;
  }

  .welcome-title {
    font-size: 48rpx;
  }

  .welcome-subtitle {
    font-size: 28rpx;
  }

  .features-section {
    grid-template-columns: 1fr;
    gap: 25rpx;
  }

  .feature-card {
    padding: 40rpx 30rpx;
    border-radius: 18rpx;
  }

  .quick-start-section {
    padding: 40rpx 30rpx;
    border-radius: 18rpx;
  }

  .quick-actions {
    flex-direction: column;
    align-items: center;
    gap: 20rpx;
  }

  .quick-btn {
    width: 100%;
    max-width: 400rpx;
    padding: 22rpx 30rpx;
  }
}

/* 小程序和APP端适配 */
/* #ifdef MP-WEIXIN || APP-PLUS */
.container {
  padding-top: var(--status-bar-height);
}

.header {
  padding-top: calc(40rpx + var(--status-bar-height));
}
/* #endif */
</style>
